<!DOCTYPE html>
<html>

<head>
    <title>宠物商店管理平台首页测试</title>
    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<!--    <script src="/javascripts/ShowItem.js"></script>-->
    <script src="/javascripts/categoryLoadScripts.js"></script>
    <script src="/javascripts/imageEdit.js"></script>
    <script src="/javascripts/Convert_Pinyin.js"></script>
    <style>
        .mynav {}

        .mynav:hover {
            background-color: #9BAEBC;
        }

        .mycenter {
            transform: translateY(20%);
        }
    </style>
</head>

<body onload="categoryInit()">
    <!--顶部框-->
    <div class="header-container justify-content-center py-3 border-bottom">
        <div class="row">
            <div class="col-lg-9 text-left px-5">
                <a href="#" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
                    <svg class="bi me-2" width="40" height="32">
                        <image width="40" height="32" xlink:href="../image/back.png"></image>
                    </svg>
                    <span class="fs-4">宠物商店商户平台</span>
                </a>
            </div>
            <div class="col-lg-3 text-center" >
                <button type="button" th:if="${session.userID}" class="btn btn-outline-primary me-2">登录</button>
                <button type="button" th:if="${session.userID}" class="btn btn-outline-primary">注册</button>
                <button type="button" th:if="${session.userID ne null}" id="btn-logout" class="btn btn-outline-primary">注销</button>
            </div>
        </div>
    </div>
    <!--顶部框结束-->
    <!--页面主体-->
    <div class="row">
        <!--侧边导航栏-->
        <div class="col-lg-2 bg-dark text-light nav nav-pills flex-column nav-justified"
            style="min-height: 90vh; padding: 0;">
            <div class="my-5" style="padding: 0;">
                <li class="nav-item" style="padding: 0;">
                    <a class="nav-link text-light mynav" href="/index" style="padding: 0;">
                        <div class="border-bottom mx-auto" style="padding-top: 5%; min-height: 7vh;">首页</div>
                    </a>
                </li>
                <li class="nav-item" style="padding: 0;">
                    <a class="nav-link text-light mynav" href="/order" style="padding: 0;">
                        <div class="border-bottom mx-auto" style="padding-top: 5%; min-height: 7vh;">订单管理</div>
                    </a>
                </li>
                <li class="nav-item" style="padding: 0;">
                    <a class="nav-link text-light mynav" href="/itemManage" style="padding: 0;  background-color: #5F788A;">
                        <div class="border-bottom mx-auto" style="padding-top: 5%; min-height: 7vh;">商品管理</div>
                    </a>
                </li>
                <li class="nav-item" th:if="${session.admin}" style="padding: 0;">
                    <a class="nav-link text-light mynav" href="/userManage" style="padding: 0;">
                        <div class="border-bottom mx-auto" style="padding-top: 5%; min-height: 7vh;">用户管理</div>
                    </a>
                </li>
            </div>
        </div>
        <!--侧边导航栏结束-->
        <!--主体部分开始-->
        <div class="col-lg-10" style="background-color: #F3F6F6;">
            <div class="mt-2 text-center bg-light">
                <h3>上架商品管理</h3>
            </div>
            <!--选项卡开始-->
            <div class="mt-2" style="background-color: white;">
                <!--选项开始-->
                <ul id="tabs" class="nav nav-tabs justify-content-center" role="tablist">
                    <!--此处使用thymeleaf-->

                    <li class="nav-item mx-2" role="presentation">
                        <button class="nav-link active" id="cat-tab" data-bs-toggle="tab" data-bs-target="#cat"
                            type="button" role="tab" aria-controls="cat" aria-selected="true"
                            onclick="setCurrentCategory('cat')">猫猫</button>
                    </li>
                    <li class="nav-item mx-2" role="presentation">
                        <button class="nav-link" id="dog-tab" data-bs-toggle="tab" data-bs-target="#dog" type="button"
                            role="tab" aria-controls="dog" aria-selected="false"
                            onclick="setCurrentCategory('dog')">狗狗</button>
                    </li>
                    <li class="nav-item mx-2" role="presentation">
                        <button class="nav-link" id="bird-tab" data-bs-toggle="tab" data-bs-target="#bird" type="button"
                            role="tab" aria-controls="bird" aria-selected="false"
                            onclick="setCurrentCategory('bird')">鸟类</button>
                    </li>
                    <li class="nav-item mx-2" role="presentation">
                        <button class="nav-link" id="pokemon-tab" data-bs-toggle="tab" data-bs-target="#pokemon"
                            type="button" role="tab" aria-controls="pokemon" aria-selected="false"
                            onclick="setCurrentCategory('pokemon')">宝可梦</button>
                    </li>
                    <li class="nav-item mx-2" role="presentation">
                        <button class="nav-link" id="bugCat-tab" data-bs-toggle="tab" data-bs-target="#bugCat"
                            type="button" role="tab" aria-controls="bugCat" aria-selected="false"
                            onclick="setCurrentCategory('bugCat')">猫猫虫</button>
                    </li>
                </ul>
                <!--选项结束-->
                <!--选项页面开始-->
                <div id="tab-content" class="tab-content">
                    <!--此处对应使用thymeleaf生成-->

                    <div class="active fade show tab-pane row px-2 mt-2" id="cat">
                        <!--猫猫商品详情开始-->
                        <div class="container">
                            <div class="row px-2">
                                <!--侧边按钮组开始-->
                                <div class="col-md-3 border">
                                    <div class="btn-group-vertical py-2 px-2">
                                        <button type="button" class="btn btn-primary rounded-pill my-2"
                                            data-bs-toggle="modal" data-bs-target="#newItem"
                                            id="addNewItemButton1">上架新商品</button>
                                        <button type="button" class="btn btn-primary rounded-pill my-2"
                                            data-bs-toggle="modal" data-bs-target="#takeDownAll"
                                            id="takeDownAllButton1">下架所有商品</button>
                                    </div>
                                </div>
                                <!--侧边按钮组开始结束-->
                                <!--右侧显示商品列表开始-->
                                <div class="col-md-9 border py-3 px-3" id="cat_cardArea">
                                    <!--上架商品卡片开始-->
                                    <div class="card border rounded-3 border-success mx-3 my-3"
                                        style="width: 13vw; float: left;">
                                        <!--商品的图片-->
                                        <img decoding="async" id="itemId_image" class="card-img-top"
                                            style="max-width: 13vw; height: 29vh;"
                                            src="C:\Users\Administrator\Pictures\卡牌DIY\阳光戒裁剪.jpg">
                                        <!--商品的信息-->
                                        <div class="card-body">
                                            <h5 class="card-title" id="itemId">商品的名称显示在这里</h5>
                                            <p class="card-text small lh-1" id="itemId_states">商品状态:预售</p>
                                            <p class="card-text small lh-1" id="itemId_limits">商品限购:无限制</p>
                                            <p class="card-text small lh-1" id="itemId_number">商品库存:20</p>
                                            <div class="row px-2">
                                                <div class="col-md-4 text-center">
                                                    <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                                        data-bs-target="#editItem" onclick="setCurrentItem(itemId)">编辑</button>
                                                </div>
                                                <div class="col-md-4 text-center">
                                                    <button type="button" class="btn btn-danger" data-bs-toggle="modal"
                                                        data-bs-target="#takeDownItem" onclick="setCurrentItem(itemId)">下架</button>
                                                </div>
                                                <div class="col-md-4 text-center">
                                                    <a  class="btn btn-warning" href="alipay.html">支付测试</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--上架商品卡片结束-->
                                </div>
                                <!--右侧商品列表结束-->
                            </div>
                        </div>
                        <!--猫猫商品结束-->
                    </div>
                    <div class="fade tab-pane row px-2 mt-2" id="dog">
                        <!--狗狗商品详情开始-->
                        <div class="container">
                            <div class="row px-2">
                                <!--侧边按钮组开始-->
                                <div class="col-md-3 border">
                                    <div class="btn-group-vertical py-2 px-2">
                                        <button type="button" class="btn btn-primary rounded-pill my-2"
                                            data-bs-toggle="modal" data-bs-target="#newItem"
                                            id="addNewItemButton2">上架新商品</button>
                                        <button type="button" class="btn btn-primary rounded-pill my-2"
                                            data-bs-toggle="modal" data-bs-target="#takeDownAll"
                                            id="takeDownAllButton2">下架所有商品</button>
                                    </div>
                                </div>
                                <!--侧边按钮组开始结束-->
                                <!--右侧显示商品列表开始-->
                                <div class="col-md-9 border py-3 px-3" id="dog_cardArea">
                                    <!--上架商品卡片开始-->
                                    <div class="card border rounded-3 border-success mx-3 my-3"
                                        style="width: 13vw; float: left;">
                                        <!--商品的图片-->
                                        <img decoding="async" class="card-img-top"
                                            style="max-width: 13vw; height: 29vh;"
                                            src="C:\Users\Administrator\Pictures\卡牌DIY\阳光戒裁剪.jpg">
                                        <!--商品的信息-->
                                        <div class="card-body">
                                            <h5 class="card-title">商品的名称显示在这里</h5>
                                            <p class="card-text small lh-1">商品状态:预售</p>
                                            <p class="card-text small lh-1">商品限购:无限制</p>
                                            <p class="card-text small lh-1">商品库存:20</p>
                                            <div class="row px-2">
                                                <div class="col-md-4 text-center">
                                                    <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                                        data-bs-target="#editItem">编辑</button>
                                                </div>
                                                <div class="col-md-4 text-center">
                                                    <button type="button" class="btn btn-danger" data-bs-toggle="modal"
                                                        data-bs-target="#takeDownItem">下架</button>
                                                </div>
                                                <div class="col-md-4 text-center">
                                                    <a  class="btn btn-warning" href="alipay.html">支付测试</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--上架商品卡片结束-->
                                </div>
                                <!--右侧商品列表结束-->
                            </div>
                        </div>
                        <!--狗狗商品结束-->
                    </div>
                    <div class="fade tab-pane row px-2 mt-2" id="bird">
                        <!--鸟类商品详情开始-->
                        <div class="container">
                            <div class="row px-2">
                                <!--侧边按钮组开始-->
                                <div class="col-md-3 border">
                                    <div class="btn-group-vertical py-2 px-2">
                                        <button type="button" class="btn btn-primary rounded-pill my-2"
                                            data-bs-toggle="modal" data-bs-target="#newItem"
                                            id="addNewItemButton3">上架新商品</button>
                                        <button type="button" class="btn btn-primary rounded-pill my-2"
                                            data-bs-toggle="modal" data-bs-target="#takeDownAll"
                                            id="takeDownAllButton3">下架所有商品</button>
                                    </div>
                                </div>
                                <!--侧边按钮组开始结束-->
                                <!--右侧显示商品列表开始-->
                                <div class="col-md-9 border py-3 px-3" id="bird_cardArea">
                                    <!--上架商品卡片开始-->
                                    <div class="card border rounded-3 border-success mx-3 my-3"
                                        style="width: 13vw; float: left;">
                                        <!--商品的图片-->
                                        <img decoding="async" class="card-img-top"
                                            style="max-width: 13vw; height: 29vh;"
                                            src="C:\Users\Administrator\Pictures\卡牌DIY\阳光戒裁剪.jpg">
                                        <!--商品的信息-->
                                        <div class="card-body">
                                            <h5 class="card-title">商品的名称显示在这里</h5>
                                            <p class="card-text small lh-1">商品状态:预售</p>
                                            <p class="card-text small lh-1">商品限购:无限制</p>
                                            <p class="card-text small lh-1">商品库存:20</p>
                                            <div class="row px-2">
                                                <div class="col-md-4 text-center">
                                                    <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                                        data-bs-target="#editItem">编辑</button>
                                                </div>
                                                <div class="col-md-4 text-center">
                                                    <button type="button" class="btn btn-danger" data-bs-toggle="modal"
                                                        data-bs-target="#takeDownItem">下架</button>
                                                </div>
                                                <div class="col-md-4 text-center">
                                                    <a  class="btn btn-warning" href="alipay.html">支付测试</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--上架商品卡片结束-->
                                </div>
                                <!--右侧商品列表结束-->
                            </div>
                        </div>
                        <!--鸟类商品结束-->
                    </div>
                    <div class="fade tab-pane row px-2 mt-2" id="pokemon">
                        <!--宝可梦商品详情开始-->
                        <div class="container">
                            <div class="row px-2">
                                <!--侧边按钮组开始-->
                                <div class="col-md-3 border">
                                    <div class="btn-group-vertical py-2 px-2">
                                        <button type="button" class="btn btn-primary rounded-pill my-2"
                                            data-bs-toggle="modal" data-bs-target="#newItem"
                                            id="addNewItemButton4">上架新商品</button>
                                        <button type="button" class="btn btn-primary rounded-pill my-2"
                                            data-bs-toggle="modal" data-bs-target="#takeDownAll"
                                            id="takeDownAllButton4">下架所有商品</button>
                                    </div>
                                </div>
                                <!--侧边按钮组开始结束-->
                                <!--右侧显示商品列表开始-->
                                <div class="col-md-9 border py-3 px-3" id="pokemon_cardArea">
                                    <!--上架商品卡片开始-->
                                    <div class="card border rounded-3 border-success mx-3 my-3"
                                        style="width: 13vw; float: left;">
                                        <!--商品的图片-->
                                        <img decoding="async" class="card-img-top"
                                            style="max-width: 13vw; height: 29vh;"
                                            src="C:\Users\Administrator\Pictures\卡牌DIY\阳光戒裁剪.jpg">
                                        <!--商品的信息-->
                                        <div class="card-body">
                                            <h5 class="card-title">商品的名称显示在这里</h5>
                                            <p class="card-text small lh-1">商品状态:预售</p>
                                            <p class="card-text small lh-1">商品限购:无限制</p>
                                            <p class="card-text small lh-1">商品库存:20</p>
                                            <div class="row px-2">
                                                <div class="col-md-4 text-center">
                                                    <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                                        data-bs-target="#editItem">编辑</button>
                                                </div>
                                                <div class="col-md-4 text-center">
                                                    <button type="button" class="btn btn-danger" data-bs-toggle="modal"
                                                        data-bs-target="#takeDownItem">下架</button>
                                                </div>
                                                <div class="col-md-4 text-center">
                                                    <a  class="btn btn-warning" href="alipay.html">支付测试</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--上架商品卡片结束-->
                                </div>
                                <!--右侧商品列表结束-->
                            </div>
                        </div>
                        <!--宝可梦商品结束-->
                    </div>
                    <div class="fade tab-pane row px-2 mt-2" id="bugCat">
                        <!--猫猫虫商品详情开始-->
                        <div class="container">
                            <div class="row px-2">
                                <!--侧边按钮组开始-->
                                <div class="col-md-3 border">
                                    <div class="btn-group-vertical py-2 px-2">
                                        <button type="button" class="btn btn-primary rounded-pill my-2"
                                            data-bs-toggle="modal" data-bs-target="#newItem"
                                            id="addNewItemButton5">上架新商品</button>
                                        <button type="button" class="btn btn-primary rounded-pill my-2"
                                            data-bs-toggle="modal" data-bs-target="#takeDownAll"
                                            id="takeDownAllButton5">下架所有商品</button>
                                    </div>
                                </div>
                                <!--侧边按钮组开始结束-->
                                <!--右侧显示商品列表开始-->
                                <div class="col-md-9 border py-3 px-3" id="bugCat_cardArea">
                                    <!--上架商品卡片开始-->
                                    <div class="card border rounded-3 border-success mx-3 my-3"
                                        style="width: 13vw; float: left;">
                                        <!--商品的图片-->
                                        <img decoding="async" class="card-img-top"
                                            style="max-width: 13vw; height: 29vh;"
                                            src="C:\Users\Administrator\Pictures\卡牌DIY\阳光戒裁剪.jpg">
                                        <!--商品的信息-->
                                        <div class="card-body">
                                            <h5 class="card-title">商品的名称显示在这里</h5>
                                            <p class="card-text small lh-1">商品状态:预售</p>
                                            <p class="card-text small lh-1">商品限购:无限制</p>
                                            <p class="card-text small lh-1">商品库存:20</p>
                                            <div class="row px-2">
                                                <div class="col-md-4 text-center">
                                                    <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                                        data-bs-target="#editItem">编辑</button>
                                                </div>
                                                <div class="col-md-4 text-center">
                                                    <button type="button" class="btn btn-danger" data-bs-toggle="modal"
                                                        data-bs-target="#takeDownItem">下架</button>
                                                </div>
                                                <div class="col-md-4 text-center">
                                                    <a  class="btn btn-warning" href="alipay.html">支付测试</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--上架商品卡片结束-->
                                </div>
                                <!--右侧商品列表结束-->
                            </div>
                        </div>
                        <!--猫猫虫商品结束-->
                    </div>
                </div>
            </div>
            <!--选项卡结束-->
        </div>
        <!--主体部分结束-->
    </div>
    <!--页面主体结束-->

    <!--模态框组件开始-->
    <!--上架新商品模态框开始-->
    <div class="modal" data-bs-backdrop="static" id="newItem">
        <div class="modal-dialog">
            <div class="modal-content">
                <!--模态框头部开始-->
                <div class="modal-header">
                    <h4 class="modal-title">上架商品</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <!--模态框头部结束-->
                <!--模态框内容开始-->
                <div class="modal-body">
                    <form method="post" action="#" enctype="multipart/form-data">

                        <div class="row mt-2">
                            <div class="col-5 text-center">
                                名称:
                            </div>
                            <div class="col-7">
                                <input type="text" id="itemName" name="itemName" placeholder="名称">
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-5 text-center">
                                状态:
                            </div>
                            <div class="col-7">
                                <select name="itemStates" id="itemStates">
                                    <option value="预售">预售</option>
                                    <option value="有货">有货</option>
                                    <option value="缺货">缺货</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-5 text-center">
                                限购:
                            </div>
                            <div class="col-7">
                                <input type="number" id="limitNumber" name="limitNumber" min="0"
                                    placeholder="输入数量,0代表无限制" value="0">
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-5 text-center">
                                价格:
                            </div>
                            <div class="col-7">
                                <input type="number" id="priceOfItem" name="priceOfItem" min="0"
                                       placeholder="价格" value="0">
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-5 text-center">
                                库存:
                            </div>
                            <div class="col-7">
                                <input type="number" id="numberOfItem" min="0" name="numberOfItem" value="10">
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-5 text-center">
                                图片:
                            </div>
                            <div class="col-7">
                                <input type="file" id="addImage" name="itemImage"
                                    accept="image/bmp, image/jpeg, image/png, image/jpg" onchange="editItemImage(event)">
                            </div>
                        </div>
                        <div class="row mt-4 mx-auto px-5">
                            <button type="button" class="btn btn-success" onclick="addNewItemFunc()">提交</button>
                        </div>
                    </form>
                </div>
                <!-- 模态框内容结束-->
            </div>
        </div>
    </div>
    <!--上架新商品模态框结束-->
    <!--编辑商品模态框开始-->
    <div class="modal" data-bs-backdrop="static" id="editItem">
        <div class="modal-dialog">
            <div class="modal-content">
                <!--模态框头部开始-->
                <div class="modal-header">
                    <h4 class="modal-title">编辑商品</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <!--模态框头部结束-->
                <!--模态框内容开始-->
                <div class="modal-body">
                    <form method="post" action="#" enctype="multipart/form-data">

                        <div class="row mt-2">
                            <div class="col-5 text-center">
                                名称:
                            </div>
                            <div class="col-7">
                                <input type="text" id="editItemName" name="editItemName" placeholder="名称">
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-5 text-center">
                                状态:
                            </div>
                            <div class="col-7">
                                <select name="editItemStates" id="editItemStates">
                                    <option value="预售">预售</option>
                                    <option value="有货">有货</option>
                                    <option value="缺货">缺货</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-5 text-center">
                                限购:
                            </div>
                            <div class="col-7">
                                <input type="number" id="editLimitNumber" name="editLimitNumber" min="0"
                                    placeholder="输入数量,0代表无限制">
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-5 text-center">
                                价格:
                            </div>
                            <div class="col-7">
                                <input type="number" id="editPriceOfItem" name="editPriceOfItem" min="0"
                                       placeholder="价格">
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-5 text-center">
                                库存:
                            </div>
                            <div class="col-7">
                                <input type="number" id="editNumberOfItem" min="0" name="editNumberOfItem">
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-5 text-center">
                                图片:
                            </div>
                            <div class="col-7">
                                <input type="file" id="editImage" name="imageOfItem"
                                    accept="image/bmp, image/jpeg, image/png, image/jpg" onchange="addItemImage(event)">
                            </div>
                        </div>
                        <div class="row mt-4 mx-auto px-5">
                            <button type="button" class="btn btn-success" onclick="editItemFunc()">提交</button>
                        </div>
                    </form>
                </div>
                <!-- 模态框内容结束-->
            </div>
        </div>
    </div>
    <!--编辑商品模态框结束-->
    <!--下架商品模态框开始-->
    <div class="modal" data-bs-backdrop="static" id="takeDownItem">
        <div class="modal-dialog">
            <div class="modal-content">
                <!--模态框头部开始-->
                <div class="modal-header">
                    <h4 class="modal-title">确定下架该商品吗?</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <!--模态框头部结束-->
                <!--模态框内容开始-->
                <div class="modal-body">
                    <div class="row">
                        <div class="col-6 d-grid">
                            <button class="btn btn-outline-primary btn-block" onclick="takeDownItemFunc()">确认</button>
                        </div>
                        <div class="col-6 d-grid">
                            <button class="btn btn-danger btn-block" data-bs-dismiss="modal">取消</button>
                        </div>
                    </div>
                </div>
                <!-- 模态框内容结束-->
            </div>
        </div>
    </div>
    <!--下架商品模态框结束-->
    <!--下架所有商品模态框开始-->
    <div class="modal" data-bs-backdrop="static" id="takeDownAll">
        <div class="modal-dialog">
            <div class="modal-content">
                <!--模态框头部开始-->
                <div class="modal-header">
                    <h4 class="modal-title">确定下架所有商品吗?</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <!--模态框头部结束-->
                <!--模态框内容开始-->
                <div class="modal-body">
                    <div class="row">
                        <div class="col-6 d-grid">
                            <button class="btn btn-outline-primary btn-block" onclick="takeDownAllFunc()">确认</button>
                        </div>
                        <div class="col-6 d-grid">
                            <button class="btn btn-danger btn-block" data-bs-dismiss="modal">取消</button>
                        </div>
                    </div>
                </div>
                <!-- 模态框内容结束-->
            </div>
        </div>
    </div>
    <!--下架所有商品模态框结束-->
    <!--模态框组件结束-->

    <!--提示框开始-->
    <div id="successAlert" class="alert alert-success fixed-top alert-dismissible invisible">
        <button type="button" class="btn-close" onclick="hideAlert('successAlert')"></button>
        <p id="successAlertText">
            <!--这里显示成功的信息-->
        </p>
    </div>
    <div id="failAlert" class="alert alert-danger fixed-top alert-dismissible invisible">
        <button type="button" class="btn-close" onclick="hideAlert('failAlert')"></button>
        <p id="failAlertText">
            <!--这里显示失败的信息-->
        </p>
    </div>
    <!--提示框结束-->
</body>
<script src="/javascripts/ItemScripts.js"></script>
</html>